<template>
    <div class="storeRevenue-container">
        <people-and-revenue />
        <user-info />
        <div class="store-data">
            <div id="store-flowerTypesProportion"></div>
            <div id="store-flowerPriceProportion"></div>
        </div>
    </div>
</template>

<script setup>
import peopleAndRevenue from './peopleAndRevenue.vue';
import userInfo from './userInfo.vue';
import { onMounted,ref,computed,watch } from 'vue';
import { AllFlowersType ,AllCommodityOrders ,flowerPriceRange} from '@/api/storeRevenue'
import * as echarts from 'echarts';
import { nextTick } from 'process';
// 所有的鲜花种类
const allFlowersType = ref()
// 所有的订单信息
const allCommodityOrders = ref([])
// 鲜花中0-9元的范围
let flowerfromZerotoTen = ref()
// 鲜花中10-19元的范围
let flowerfromTentoTwenty = ref()
// 鲜花中20-29元的范围
let flowerfromTwentytoThirty = ref()
// 鲜花中30元以上的
let flowerfromThirty = ref()
// 获取不同鲜花种类对应的不同数量
const getFlowerTypeNumnber = () =>{
    // 获取所有鲜花种类
    let flowersType = allFlowersType.value.typeData
    // 创建鲜花种类数量统计对象
    let flowersTypeObj = {}
    // 为所有鲜花种类赋初值
    flowersType.forEach(item =>{
        flowersTypeObj[item] = 0
    })
    // 对所有的鲜花种类进行循环
    flowersType.forEach((item)=>{
        allCommodityOrders.value.forEach(i=>{
            if(i.type === item){
                flowersTypeObj[item] += i.salesVolumes
            }
        })
    })
    // 返回出所有的值
    return Object.values(flowersTypeObj)
}
// 0-9元鲜花的所有数量
const NumberTen = computed(()=>{
    let total = 0
    flowerfromZerotoTen.value?.forEach((item)=>{
        total += item.salesVolumes
    })
    return total
})
// 10-19元鲜花的所有数量
const NumberTwenty = computed(()=>{
    let total = 0
    flowerfromTentoTwenty.value?.forEach((item)=>{
        total += item.salesVolumes
    })
    return total
})
// 20-29元鲜花的所有数量
const NumberThirty = computed(()=>{
    let total = 0
    flowerfromTwentytoThirty.value?.forEach((item)=>{
        total += item.salesVolumes
    })
    return total
})
// 30元及以上鲜花的所有数量
const NumberGreaterThirty = computed(()=>{
    let total = 0
    flowerfromThirty.value?.forEach((item)=>{
        total += item.salesVolumes
    })
    return total
})
// 鲜花价钱分布比
const FlowerPriceProportion = () =>{
    // 定义渐变
	var linear = {
	  type: 'linear',
	  x: 0,
	  y: 0,
	  x2: 0,
	  y2:1,
	  colorStops: [{
		  offset: 0, color: '#f9906f' // 0% 处的颜色
	  }, {
		  offset: 1, color: '#c93756' // 100% 处的颜色
	  }],
	  global: false // 缺省为 false
    }
    let echartFlowerPriceProportion = echarts.init(document.getElementById("store-flowerPriceProportion"))
    let option = {
			// 图表的标题
			title:{
				text:"鲜花不同单价的售卖数量"
			},
			// 图表的提示
			tooltip:{},
			// 图例
			legend:{data:["价位售卖量"]},
			// x轴线
			xAxis:{data:['0-9元','10-19元','20-29元','30元以上']},
			// y轴线
			yAxis:{},
			// 设置数据
			series:[
				{
					// 数据名称
					name:"价位售卖量",
					// 类型为柱状图
					type:"bar",
                    itemStyle:{color:linear,
                    borderRadius:[30,30,0,0],
                    opacity: 0.8
                },
					// 数据data
					data:[NumberTen.value,NumberTwenty.value,NumberThirty.value,NumberGreaterThirty.value]
					}
			]
		}
        // 4.3 更新配置
        echartFlowerPriceProportion.setOption(option);
        // 大小随页面变化而变化
        window.addEventListener('resize', function() {
            echartFlowerPriceProportion.resize();
        });
}
// 鲜花种类售卖量统计
const FlowerTypesProportion = () =>{
    // 定义渐变
	var linear = {
	  type: 'linear',
	  x: 0,
	  y: 0,
	  x2: 0,
	  y2:1,
	  colorStops: [{
		  offset: 0, color: '#c0ebd7' // 0% 处的颜色
	  }, {
		  offset: 1, color: '#fff2df' // 100% 处的颜色
	  }],
	  global: false // 缺省为 false
    }
    let echartFlowerTypesProportion = echarts.init(document.getElementById("store-flowerTypesProportion"))
    let option = {
			// 图表的标题
			title:{
				text:"鲜花种类售卖量统计"
			},
			// 图表的提示
			tooltip:{},
			// 图例
			legend:{data:["种类售卖量"]},
			// x轴线
			xAxis:{data:allFlowersType.value.typeData},
			// y轴线
			yAxis:{},
			// 设置数据
			series:[
				{
					// 数据名称
					name:"种类售卖量",
					// 类型为柱状图
					type:"bar",
                    itemStyle:{color:linear,
                    borderRadius:[30,30,0,0],
                    opacity: 0.8
                },
					// 数据data
					data:getFlowerTypeNumnber()
					}
			]
		}
        // 4.3 更新配置
        echartFlowerTypesProportion.setOption(option);
        // 大小随页面变化而变化
        window.addEventListener('resize', function() {
            echartFlowerTypesProportion.resize();
        });
}
onMounted(async ()=>{
    // 获取所有的鲜花种类
    allFlowersType.value = await AllFlowersType()
    // 获取所有的订单信息
    allCommodityOrders.value = await AllCommodityOrders()
    flowerfromZerotoTen.value = await flowerPriceRange({startPrice:0,endPrice:10})
    flowerfromTentoTwenty.value = await flowerPriceRange({startPrice:10,endPrice:20})
    flowerfromTwentytoThirty.value = await flowerPriceRange({startPrice:20,endPrice:30})
    flowerfromThirty.value = await flowerPriceRange({startPrice:30,endPrice:10000})
    // 延时加载
    nextTick(()=>{
        FlowerTypesProportion()
        FlowerPriceProportion()
    })
})
</script>

<style lang="scss" scoped>
.storeRevenue-container{
    height: 100%;
    width: 100%;
    
.store-data{
        display: flex;
        padding: 20px;
        border-radius: 10px;
        box-shadow: 0 1px 3px rgba(0, 0, 0, 0.2);
        margin-top: 20px;
        width: 100%;
        height: 400px;
        #store-flowerTypesProportion{
            width: 45%;
            height: 100%;
            background-color: #ffff;
        }
        #store-flowerPriceProportion{
            margin-left: 5%;
            width: 45%;
            height: 100%;
            background-color: #ffff;
        }
    }
}
</style>